'use strict';
import React from 'react';
import {
    View,
    Image,
    Text,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    Animated,
} from 'react-native';
import ToolBar from '../Components/ToolBar';
import BottomInputText from '../Components/BottomInputText';
import FoundDetailsListView from '../Components/FoundDetailsListView';
import {_renderAvatarHead} from '../Utils/ViewUtils';
import BottomShareView from '../Components/BottomShareView';
import objectImageViewer from './objectImageViewer';
import Global from '../Commom/GlobalConst';
import DateUtil from '../Commom/DateUtil';
let width = Global.Const.size.width;
import FoundAPIService from "../Commom/FoundAPIService";
import RegisteredContainer from '../Containers/RegisteredContainer';
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    scrollStyle: {
        backgroundColor: '#F2F3F5',
    },
    content: {
        fontSize: 16,
        color: Global.FontColor.DimGray,
        padding: 10,
        marginBottom: 1,
        lineHeight: 28,
        backgroundColor: 'white',
    },
    contentImg: {
        padding: 10,
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 15,
        backgroundColor: 'white'
    },
    fontSize12: {
        fontSize: 12,
        color: Global.FontColor.LightGrey,
    },
    rowContentBox: {
        padding: 10,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'white'
    },
    fontSize16: {
        fontSize: 16,
        textAlign: 'right',
        flex: 1,
        color: Global.FontColor.DarkGray
    },
    imageTitle: {
        width: (width - 40) / 4,
        textAlign: 'center',
        color: Global.FontColor.DimGray,
        marginTop: 5,
        fontSize: 12
    },
    image: {
        width: (width - 40) / 4,
        height: (width - 40) / 4
    }
});

/**
 * 帮购详情
 */
class HelpToBuyDetails extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            commentList: [],
            paddingBottom: new Animated.Value(0),
            data: {},
        };
    }

    componentDidMount() {
        let id = this.props.ID;
        FoundAPIService.helpToBuyDetails(id).then((ret)=> {
            this.setState({
                data: ret,
                commentList: ret.commemt_list
            });
        }).catch((err)=> {

        });
    }
    refreshComments(){
        let id = this.props.ID;
        FoundAPIService.helpToBuyDetails(id).then((ret)=> {
            this.setState({
                commentList: ret.commemt_list
            });
        }).catch((err)=> {

        });
    }
    _KeyboardDidShow(height) {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: height,
                duration: 50,
            }
        ).start();
    }

    _KeyboardDidHide() {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: 0,
                duration: 50,
            }
        ).start();
    }

    goToObjectImageViewer(images) {
        this.props.navigator.push({
            name: 'objectImageViewer',
            component: objectImageViewer,
            passProps: {
                source: images
            }
        });
    }
    goLoginPage(){
        this.props.navigator.push({
            id: 'RegisteredContainer',
            component: RegisteredContainer,
            passProps: {},
        });
    }
    render() {
        var return_date=DateUtil.date(this.state.data.return_date+"")
        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                <ToolBar leftFunc={()=> this.props.navigator.pop()} title="帮购" rightFunc={() => {
                    this.shareView.showShareView();
                }}/>
                <ScrollView style={styles.scrollStyle}>
                    {_renderAvatarHead(this.state.data)}
                    <Text style={styles.content}>{this.state.data.content}</Text>
                    <View style={styles.rowContentBox}>
                        <Text style={styles.fontSize12}>截止有效时间</Text>
                        <Text numberOfLines={1}
                              style={styles.fontSize16}>{return_date}</Text>
                    </View>
                    <View style={styles.contentImg}>
                        {
                            this.state.data.initiated_list ?
                                this.state.data.initiated_list.map((item, index)=> {
                                    return (
                                        <View key={'buy' + index} style={{alignItems: 'center', marginRight: 5}}>
                                            <TouchableOpacity
                                                onPress={() => this.goToObjectImageViewer(this.state.data.initiated_list)}>
                                                <Image source={{uri:item.images}} style={styles.image}/>
                                            </TouchableOpacity>
                                            <Text numberOfLines={1} style={styles.imageTitle}>{item.title}</Text>
                                        </View>
                                    )
                                })
                                : null
                        }
                    </View>
                    {this.state.commentList.length > 0 ?
                        <View style={{flexDirection: 'row',alignItems: 'center',marginTop:10,padding: 10,paddingLeft: 15, backgroundColor: 'white',borderColor: '#F2F3F5',borderBottomWidth: 1,
                        }}>
                            <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                   source={require('../../Image/icon_gray_comment.png')}
                            />
                            <Text style={{color: '#333', fontSize: 16}}>点评</Text>
                        </View>
                        : null}
                    {this.state.commentList.length > 0 ?
                        <FoundDetailsListView commentList={this.state.commentList}/> : null}
                </ScrollView>
                <BottomInputText
                                 keyboardDidHide={() => this._KeyboardDidHide()}
                                 keyboardDidShow={(height) => this._KeyboardDidShow(height)}
                                 id={this.props.ID}
                                 goLoginPage={()=>this.goLoginPage()}
                                 refreshComments={()=>this.refreshComments()}
                />
                <BottomShareView
                    shareTitle={ this.state.data.user_name}
                    shareContent={this.state.data.content}
                    shareImageUrl={this.state.data.avatar}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(c) => {this.shareView = c}}/>
            </Animated.View>
        )
    }
}

export default HelpToBuyDetails;